﻿
@{
    ViewBag.Title = "Follow";
    Layout = "~/Views/Shared/_UserCenter.cshtml";
}
@model List<Beauty.Model.collection>
<link href="~/css/collect_page.css" rel="stylesheet" />
<style>
    .fav-goods-list ul:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    * html .fav-goods-list ul {
        height: 1%;
    }

    * + html .fav-goods-list ul {
        min-height: 1%;
    }

    .fav-goods-list li {
        float: left;
        margin: 0 20px 5px 0;
    }

    .fav-goods-list .fav-goods-item {
        position: relative;
        width: 190px;
        height: 346px;
    }

        .fav-goods-list .fav-goods-item .p-img {
            position: relative;
            width: 160px;
            margin: 0 0 10px;
        }

        .fav-goods-list .fav-goods-item .goods-extra-tip, .fav-goods-list .fav-goods-item .goods-extra-tip2 {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 20px;
            line-height: 20px;
            color: #fff;
            text-align: center;
            filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#99000000', endColorstr='#99000000');
            background: rgba(0,0,0,.6);
        }

        .fav-goods-list .fav-goods-item .goods-extra-tip2 {
            color: #333;
            filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#cccccccc', endColorstr='#cccccccc');
            background: rgba(204,204,204,.8);
        }

        .fav-goods-list .fav-goods-item .p-name {
            height: 18px;
            line-height: 18px;
            overflow: hidden;
            margin: 0 0 10px;
        }

            .fav-goods-list .fav-goods-item .p-name a {
                /* color: #005ea7 */
            }

        .fav-goods-list .fav-goods-item .p-price {
            margin: 0 0 6px;
            font-size: 12px;
            height: 20px;
        }

            .fav-goods-list .fav-goods-item .p-price strong {
                float: left;
                height: 20px;
                font-family: verdana;
                color: #e4393c;
            }

            .fav-goods-list .fav-goods-item .p-price .icon-prom {
                float: left;
                height: 20px;
                padding: 0 5px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
                margin: 0 3px;
                background: #e4393c;
                color: #fff;
            }

            .fav-goods-list .fav-goods-item .p-price .stock {
                height: 20px;
                float: right;
                color: #e4393c;
            }

        .fav-goods-list .fav-goods-item .p-comments {
            display: inline-block;
            display: block;
            color: #999;
        }

            .fav-goods-list .fav-goods-item .p-comments:after {
                content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }

        * html .fav-goods-list .fav-goods-item .p-comments {
            height: 1%;
        }

        * + html .fav-goods-list .fav-goods-item .p-comments {
            min-height: 1%;
        }

            .fav-goods-list .fav-goods-item .p-comments .c-txt {
                float: left;
            }

            .fav-goods-list .fav-goods-item .p-comments .c-perc {
                float: right;
            }

        .fav-goods-list .fav-goods-item .p-opbtns {
            margin: 6px 0 5px;
            font-size: 0;
            -webkit-text-size-adjust: none;
        }

            .fav-goods-list .fav-goods-item .p-opbtns .btn {
                display: inline-block;
                *display: inline;
                *zoom: 1;
                height: 18px;
                line-height: 18px;
                padding: 1px 3px 0;
                vertical-align: middle;
                margin-right: 2px;
                border: 1px solid #e2e2e2;
                color: #333;
                font-size: 12px;
                -webkit-border-radius: 1px;
                -moz-border-radius: 1px;
                border-radius: 1px;
                background-color: #F7F7F7;
                background-image: -moz-linear-gradient(top,#F7F7F7,#F3F2F2);
                background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#F7F7F7),color-stop(1,#F3F2F2));
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F7F7F7', endColorstr='#F3F2F2', GradientType='0');
                -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F7F7F7', endColorstr='#F3F2F2');
                background-image: linear-gradient(to bottom,#F7F7F7 0,#F3F2F2 100%);
            }

                .fav-goods-list .fav-goods-item .p-opbtns .btn:hover {
                    text-decoration: none;
                    background-color: #f8f8f8;
                    background-image: -moz-linear-gradient(top,#f8f8f8,#f5f5f5);
                    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#f8f8f8),color-stop(1,#f5f5f5));
                    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#f5f5f5', GradientType='0');
                    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#f5f5f5');
                    background-image: linear-gradient(to bottom,#f8f8f8 0,#f5f5f5 100%);
                }

        .fav-goods-list .fav-goods-item .p-extra {
            width: 190px;
            overflow: hidden;
            font-size: 0;
        }

            .fav-goods-list .fav-goods-item .p-extra .comparison, .fav-goods-list .fav-goods-item .p-extra .cut-act, .fav-goods-list .fav-goods-item .p-extra .mate-coupon {
                font-size: 12px;
                position: relative;
                display: inline-block;
                *display: inline;
                *zoom: 1;
                height: 15px;
                line-height: 15px;
                padding: 0 10px 0 28px;
                color: #fff;
                border-style: solid;
                border-width: 1px 0;
                margin: 0 0 3px;
                cursor: default;
            }

                .fav-goods-list .fav-goods-item .p-extra .comparison .txt, .fav-goods-list .fav-goods-item .p-extra .cut-act .txt, .fav-goods-list .fav-goods-item .p-extra .mate-coupon .txt {
                    display: inline-block;
                    *display: inline;
                    *zoom: 1;
                    max-width: 150px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                    .fav-goods-list .fav-goods-item .p-extra .comparison .txt a, .fav-goods-list .fav-goods-item .p-extra .cut-act .txt a, .fav-goods-list .fav-goods-item .p-extra .mate-coupon .txt a {
                        color: #fff;
                    }

                .fav-goods-list .fav-goods-item .p-extra .comparison i, .fav-goods-list .fav-goods-item .p-extra .cut-act i, .fav-goods-list .fav-goods-item .p-extra .mate-coupon i {
                    position: absolute;
                    left: 0;
                    top: -3px;
                    display: block;
                    width: 22px;
                    height: 20px;
                    background: url(//misc.360buyimg.com/user/myjd-2015/css/i/fav-icons.png) no-repeat;
                }

                .fav-goods-list .fav-goods-item .p-extra .comparison b, .fav-goods-list .fav-goods-item .p-extra .cut-act b, .fav-goods-list .fav-goods-item .p-extra .mate-coupon b {
                    position: absolute;
                    display: block;
                    right: -1px;
                    top: -1px;
                    width: 3px;
                    height: 17px;
                    overflow: hidden;
                    background: url(//misc.360buyimg.com/user/myjd-2015/css/i/fav-icons.png) no-repeat;
                }

            .fav-goods-list .fav-goods-item .p-extra .comparison {
                background-color: #04c142;
                border-color: #15db56;
            }

                .fav-goods-list .fav-goods-item .p-extra .comparison i {
                    background-position: 0 -85px;
                }

                .fav-goods-list .fav-goods-item .p-extra .comparison b {
                    background-position: -32px -87px;
                }

            .fav-goods-list .fav-goods-item .p-extra .cut-act {
                background-color: #ff5154;
                border-color: #ff8f70;
            }

                .fav-goods-list .fav-goods-item .p-extra .cut-act i {
                    background-position: 0 -105px;
                }

                .fav-goods-list .fav-goods-item .p-extra .cut-act b {
                    background-position: -32px -107px;
                }

            .fav-goods-list .fav-goods-item .p-extra .mate-coupon {
                background-color: #ff7608;
                border-color: #ffa55c;
            }

                .fav-goods-list .fav-goods-item .p-extra .mate-coupon a {
                    color: #fff;
                }

                .fav-goods-list .fav-goods-item .p-extra .mate-coupon i {
                    background-position: 0 -125px;
                }

                .fav-goods-list .fav-goods-item .p-extra .mate-coupon b {
                    background-position: -32px -127px;
                }

        .fav-goods-list .fav-goods-item .p-float-opbtns {
            position: absolute;
            display: none;
            width: 100%;
            height: 26px;
            top: 0;
            font-size: 0;
        }

            .fav-goods-list .fav-goods-item .p-float-opbtns .go-shop-btn, .fav-goods-list .fav-goods-item .p-float-opbtns .simi-btn {
                display: inline-block;
                *display: inline;
                *zoom: 1;
                height: 26px;
                line-height: 26px;
                padding: 0 12px;
                color: #fff;
                font-size: 12px;
                margin: 0 5px 0 0;
                filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#99000000', endColorstr='#99000000');
                background: rgba(0,0,0,.6);
                vertical-align: middle;
            }

                .fav-goods-list .fav-goods-item .p-float-opbtns .go-shop-btn:hover, .fav-goods-list .fav-goods-item .p-float-opbtns .simi-btn:hover {
                    background: #e4393c;
                    filter: none;
                }

            .fav-goods-list .fav-goods-item .p-float-opbtns .go-shop-btn {
                position: relative;
                padding-left: 31px;
            }

                .fav-goods-list .fav-goods-item .p-float-opbtns .go-shop-btn b {
                    position: absolute;
                    top: 5px;
                    left: 12px;
                    width: 16px;
                    height: 16px;
                    margin: 0 3px 0 0;
                    vertical-align: middle;
                    background: url(//misc.360buyimg.com/user/myjd-2015/css/i/fav-icons.png) 0 -61px no-repeat;
                }

        .fav-goods-list .fav-goods-item .fav-del-box {
            position: absolute;
            z-index: 10;
            top: 0;
            left: 0;
            width: 160px;
            height: 160px;
        }

            .fav-goods-list .fav-goods-item .fav-del-box .del-bg {
                position: absolute;
                width: 100%;
                height: 160px;
                background: #000;
                opacity: .6;
                filter: alpha(opacity=60);
            }

            .fav-goods-list .fav-goods-item .fav-del-box .del-cont {
                position: absolute;
                width: 100%;
                top: 50%;
                margin-top: -40px;
                color: #fff;
                text-align: center;
            }

            .fav-goods-list .fav-goods-item .fav-del-box .del-txt {
                font-size: 15px;
                font-family: "Microsoft YaHei";
            }

            .fav-goods-list .fav-goods-item .fav-del-box .del-opbtns {
                margin: 25px 0 0;
            }

                .fav-goods-list .fav-goods-item .fav-del-box .del-opbtns .btn {
                    display: inline-block;
                    *display: inline;
                    *zoom: 1;
                    height: 29px;
                    line-height: 29px;
                    padding: 0 20px;
                    filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#99000000', endColorstr='#99000000');
                    background: rgba(0,0,0,.6);
                    color: #fff;
                    -webkit-border-radius: 3px;
                    -moz-border-radius: 3px;
                    border-radius: 3px;
                }

                    .fav-goods-list .fav-goods-item .fav-del-box .del-opbtns .btn:hover {
                        background: #e4393c;
                        filter: none;
                    }

    .fav-goods-list .fav-goods-item-hover .p-float-opbtns {
        display: block;
    }

    .fav-goods-list .fav-gitem-extra, .fav-goods-list .fav-gitem-extra .p-name a {
        color: #999;
    }
</style>





<div class="fav-goods-list">
    <ul>
        @foreach (var item in Model)
        {
            <li>
                <div class="fav-goods-item fav-goods-item-hover" id="goods_2986824" venderid="1000000182" 2016-10-19="" 15:40:48="" data-followeddate="2016-10-19" state="1">
                    <div class="p-img">
                        <a href="/items/@item.AlbumId" target="_blank" clstag="homepage|keycount|guanzhu|follow_sku">
                            <img width="160" height="160" src="@item.AlbumEntity.CoverSrc" alt="@item.AlbumEntity.Title" data-img="1" onerror="$.errorImage(this,'//img11.360buyimg.com/n3/jfs/t2788/52/1958268823/197481/c0b3b690/57511e01N71da2a0c.jpg');" data-zoom-img-src="https://img11.360buyimg.com/n0/jfs/t2788/52/1958268823/197481/c0b3b690/57511e01N71da2a0c.jpg">
                        </a>
                    </div>
                    <div class="p-name">

                        <a href="/items/@item.AlbumId" target="_blank" title="@item.AlbumEntity.Title" clstag="homepage|keycount|guanzhu|follow_sku">@item.AlbumEntity.Title</a>
                    </div>
                    <div class="p-price">
                        <span price="5199.00">@item.PicCount 张图片</span>
                        <span class="stock"></span>
                    </div>
                    <div class="p-comments">
                        <span>@item.CollectionCount 人收藏</span>

                    </div>

                    <div class="p-extra">
                        <div placeholder="reduced"></div>
                        <div placeholder="reachAndReduce"></div>
                    </div>
                    <div class="p-float-opbtns" style="display: none;">
                        <a class="simi-btn" target="_blank" href="javascript:;" onclick="cancelFollow(@item.AlbumId,this)" clstag="homepage|keycount|guanzhu|similar_shp">取消收藏</a>

                    </div>
                </div>
            </li>
        }
    </ul>
</div>



<script>
    layui.use(['layer'], function () {
        var layer = layui.layer;


    });


    $(".fav-goods-list .fav-goods-item").mouseover(function () {
        //alert($(this).find(".p-float-opbtns").eq(0).html);
        jQuery(".p-float-opbtns").css("display", "none")
        jQuery(this).find(".p-float-opbtns").eq(0).css("display", "block");


    })

    function cancelFollow(id,dom) {

        layer.open({
            shade: 0.7
    ,title: "提示信息"
    ,closeBtn: false
    ,area: '300px;'
    ,content: '你确定要取消收藏吗？'
    ,btn: ['我确定', '再想想']
    ,moveType: 1
    ,btn1: function(index){
        layer.close(index)
        var loading= layer.load(3)


        jQuery.post("/Follow/Follow", {action_type:2 ,albumId: id}, function (data) {
            if (data.error_code!=0) {
                layer.alert(data.msg);
            }else {
                layer.close(loading)


                jQuery(dom).parents("li").remove()

                //location.reload()
            }
        },"json");

    }
        })
        return



    }
</script>